<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>

		<style>

			.kuang{
				
				width: 300px;
				height: 100px;
				border: 1px solid #000;
				position: relative;
				/* animation: myde 4s; */
				box-shadow: 10px 10px 10px #000;
				background: linear-gradient(#eee,#111);
				transform: translate(200px,150px);
				transform: rotate(21deg);
				/* transform: scale(1.2,1.2); */
				transform: skew(20deg,20deg);
				transition: width 2s;
				box-sizing: border-box;

			}

			.dome{

				width: 500px;
				height: 500px;
				border: 1px solid #000;

			}

			@media screen and (max-width: 600px) {
			    .dome {
			        background-color: lightgreen;
			    }
			}


			@keyframes myde{
				0% {background-color: red; left: 30px; top: 30px;}
				25% {background-color: #000; left: 60px; top: 60px;}
				50% {background-color: #00eee0; left: -90px; top: 90px;}
				100% {background-color: #000fff; left: 120px; top: -120px;}
			}

			#c{
				width: 500px;
				height: 500px;
				border: 1px solid #000;
				display: -webkit-box;
			}
			
		</style>
	</head>
	<body>
	
		<div class="kuang">shenme qingkuang</div>
		<div class="dome"></div>

		<div id="c">
			
			<div class="l">123</div>
			<div class="r">234</div>

		</div>


		<script type="text/javascript">

			var arr = ['<ul>', '</ul>'];
			var m = document.getElementById('c');
				

			for(var i = 1; i <= 10; i++){
				
				arr.push(
					
						
						'<li>','第', i ,'项','</li>'
					
					
					)
				c.innerHTML = arr.join('');
			}
			console.log(arr)
		</script>

	</body>
</html>